<template>
	<view class="mainbgc">
		<header-top :messageInfo="{typeFlag:true,message:'打卡',liner:false}"></header-top>
		<view class="ffffff mainpadding_top">
			<view class="titletext">
				<text>打卡时间：</text>
				<text class="maincolor_text">{{dateFormat(date)}}</text>
			</view>
			<view class="flexleft margin_top">
				<view class="addressicon2 margin_right"></view>
				<view class="addresstext">{{address}}</view>
			</view>
			<view class="xiaohong margin_top" v-if="dk_des">{{dk_des}}</view>
			<!-- 未签到展示内容 -->
			<view class="flexleft margin_top">
				<!-- 已上传的图片 -->
				<view class="select-box flexcolumn" v-for="(item,index) in upImg" :key="index">
					<view class="upimageicon">
						<image :src="item" mode=""></image>
						<image class="shanchu" src="../../../static/image/system/shanchu3.png" @click="deleimgae(index)"
							mode=""></image>
					</view>
				</view>
				<!-- 未上传 -->
				<view class="select-box flexcenter" v-if="upImg.length<=2" @click="uploadImg">
					<view class="upimageicon">
						<image src="@/static/image/system/upimageicon.png" mode=""></image>
					</view>
				</view>
			</view>
			<textarea class="textarea mainpadding radius margin_top" placeholder="请输入备注信息" maxlength="50"
				v-model="notes"></textarea>
		</view>
		<view class="mainpadding" @click="submit">
			<view class="surebtns flexcenter margin_top">确定</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				date: new Date().toISOString(), //现在时间
				upImg: [],
				images:[],
				type: 1,
				notes: "", //说明
				lat: "35.17466",
				lng: "109.67307",
				address: "河南省郑州市高新区悦润府",
				dk_des:""
			}
		},
		onLoad(options) {
			this.type = options.type
			let _this = this;
			setInterval(function() {
				_this.date = Date.parse(new Date());
			}, 1000);
			// #ifdef APP-PLUS
			this.getlocation()
			// #endif
			this.getsystem()
		},
		methods: {
			getsystem(){
				httpRequest.request('/dhtapi/index/getConfigInfo', 'POST', {
				}, false, false, true).then(res => {
					this.dk_des = res.data.dk_des
				})
			},
			// 获取经纬度位置信息
			getlocation() {
				let _this = this
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success: function(res) {
						let ars = res.address
						_this.address = ars.province + ars.city + ars.district + ars.street + ars.streetNum +
							ars.poiName
						_this.lat = res.latitude
						_this.lng = res.longitude
					}
				});
			},
			submit() {
				// if(this.upImg.length==0){
				// 	httpRequest.toast("请上传图片")
				// 	return false
				// }
				// if(this.notes==""){
				// 	httpRequest.toast("请输入打卡备注")
				// 	return false
				// }
				httpRequest.request('/dhtapi/user/kqSign', 'POST', {
					type: this.type, //1签到，2签退
					images: this.images.join(),
					notes: this.notes,
					adress: this.address,
					longitude: this.lng,
					latitude: this.lat
				}, false, false, true).then(res => {
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						setTimeout(() => {
							uni.navigateBack(1)
						}, 1000)
					}
				})
			},
			dateFormat(time) {
				return httpRequest.dateFormat(time)
			},
			// 删除上传图片
			deleimgae(index) {
				this.upImg.splice(index, 1)
				this.images.splice(index, 1)
			},
			//上传图片
			uploadImg() {
				let _this = this;
				let upImgs = _this.upImg;
				let num = 3 - upImgs.length;
				if (num <= 0) {
					return false;
				}
				uni.showActionSheet({
					itemList: ['相机'],
					success: function(res) {
						console.log(res)
						// 选择相机走0
						if (res.tapIndex == 0) {
							httpRequest.chooseImage(num, ['camera']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i], _this.upImg)
								}
							}).catch(err => {});
						}
						// 选择相册走1
						if (res.tapIndex == 1) {
							httpRequest.chooseImage(num, ['album']).then(res => {
								for (var i = 0; i < res.length; i++) {
									console.log(res[i])
									_this.uploadImageService(res[i], _this.upImg)
								}
							}).catch(err => {});
						}
					},
					fail: function(res) {}
				});
			},
			// 详情转载
			uploadImageService(url, upImg) {
				let _this = this;
				httpRequest.uploadFile('/api/common/upload', url).then(res => {
					this.images.push(res.url)
					this.upImg.push(res.fullurl)
				}).catch(err => {});
			},
		}
	}
</script>

<style lang="scss">
	.maincolor_text {
		font-weight: 500;
		color: #0BBDCB;
	}

	.addresstext {
		color: #999999;
	}

	// 选择
	.select-box {
		width: 33.33%;
	}

	// 陈列拍照
	.upimageicon {
		position: relative;
		width: 200rpx;
		height: 200rpx;
		border-radius: 20rpx;

		image {
			border-radius: 20rpx;
			width: 100%;
			height: 100%;
		}
	}

	.shanchu {
		width: 31rpx !important;
		height: 30rpx !important;
		position: absolute;
		left: 45%;
		bottom: -7%;
	}

	.textarea {
		box-sizing: border-box;
		width: 100%;
		background-color: #F8F8F8;
		height: 180rpx;
	}
</style>
